﻿@page "/file-manager/custom-thumbnail"

@using Syncfusion.Blazor.FileManager;

@inject IJSRuntime JsRuntime;

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates the custom thumbnail of the File Manager you can customize with your own icon.</p>
</SampleDescription>
<ActionDescription>
   <p>The <b>File Manager</b> component is used to explore a file system through a web application, similar to the windows explorer for windows. It supports all the basic file operations such as create, rename, delete and so on.</p>
   <p><b>Note: </b>File Manager's upload functionality is restricted in the online demo. If you need to test upload functionality, please install <a target='_blank' href='https://www.syncfusion.com/downloads'>Syncfusion Essential Studio </a>on your machine and run the demo.</p>
</ActionDescription>

<div class="control-section">
    <SfFileManager TValue="FileManagerDirectoryContent">
        <FileManagerAjaxSettings Url="https://ej2-aspcore-service.azurewebsites.net/api/FileManager/FileOperations"
                                 UploadUrl="https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Upload"
                                 DownloadUrl="https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Download"
                                 GetImageUrl="https://ej2-aspcore-service.azurewebsites.net/api/FileManager/GetImage">
        </FileManagerAjaxSettings>
    </SfFileManager>
</div>

<style>

    .e-filemanager .e-large-icons .e-fe-image {
        background-image: url("");
    }

    .e-filemanager .e-large-icons .e-fe-music {
        background-image: url("");
    }

    .e-filemanager .e-large-icons .e-fe-xlsx {
        background-image: url("");
    }

    .e-filemanager .e-large-icons .e-fe-video {
        background-image: url("");
    }

    .e-filemanager .e-large-icons .e-fe-pptx {
        background-image: url("");
    }

    .e-filemanager .e-large-icons .e-fe-rar {
        background-image: url("");
    }

    .e-filemanager .e-large-icons .e-fe-zip {
        background-image: url("");
    }

    .e-filemanager .e-large-icons .e-fe-txt {
        background-image: url("");
    }

    .e-filemanager .e-large-icons .e-fe-js {
        background-image: url("");
    }

    .e-filemanager .e-large-icons .e-fe-css {
        background-image: url("");
    }

    .e-filemanager .e-large-icons .e-fe-html {
        background-image: url("");
    }

    .e-filemanager .e-large-icons .e-fe-unknown {
        background-image: url("");
    }

    .e-filemanager .e-large-icons .e-fe-exe {
        background-image: url("");
    }

    .e-filemanager .e-large-icons .e-fe-msi {
        background-image: url("");
    }

    .e-filemanager .e-large-icons .e-fe-php {
        background-image: url("");
    }

    .e-filemanager .e-large-icons .e-fe-doc,
    .e-filemanager .e-large-icons .e-fe-docx {
        background-image: url("");
    }

    .e-filemanager .e-large-icons .e-fe-xml {
        background-image: url("");
    }

    .e-filemanager .e-large-icons .e-fe-folder {
        background-image: url("");
    }
</style>